<template>
	<view class="my-content">
		<view class="head-box" :style="'background: url('+personBgi+');background-size: 100%;100%'">
			<image style="margin: 0 auto;width: 140rpx;height: 140rpx;border-radius: 50%;"
				:src="userInfo.headUrl ? userInfo.headUrl : '../../static/personalPhoto.png'"></image>
			<view style="margin-top: 10rpx;font-size: 38rpx;color: #fff;">
				{{userInfo.userName ? userInfo.userName : '未登录'}}
			</view>
			<view style="margin-top: 10rpx;">{{userInfo.unitName?userInfo.unitName:'无企业信息'}} /
				{{userInfo.deptName?userInfo.deptName :'无部门信息'}}
			</view>
			<view style="display: flex;align-items: center;justify-content: center;margin: 10rpx;">
				<image src="../../static/ipone.png" style="width: 24rpx;height: 34rpx;"></image>
				<view style="margin-left: 10rpx;">{{userInfo.phone}}</view>
			</view>
		</view>
		<view class="main-box pt50 plr40">
			<view style="height: 100rpx;display: flex;align-items: center;justify-content: space-between;"
				v-for="(item,index) in list" :key="index" @click="click(item)">
				<view style="display: flex;align-items: center;">
					<image :src="item.bgSrc" style="width: 34rpx;height: 36rpx;margin-top: 8rpx;"></image>
					<view style="margin-left: 28rpx">{{item.name}}</view>
				</view>
				<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
			</view>
		</view>
		<view
			style="position:absolute;bottom: 0; ;width: 100%;height: 100rpx;line-height: 100rpx;background-color: #fff;color: red;display: flex;align-items: center;justify-content: center;"
			@click="exitOut">
			<image src="../../static/exit.png" style="width: 34rpx;height: 36rpx;margin-top: 8rpx;"></image>
			<view style="margin-left: 28rpx">退出账号</view>
		</view>
	</view>
</template>

<script>
	import {personBgi} from '../../pagesA/base64Img.js'
	export default {
		data() {
			return {
				personBgi,
				storageSize: '',
				userInfo: {},
				list: [{
						name: '信息修改',
						url: '../../pagesA/informationChange/informationChange',
						bgSrc: require('../../static/information.png'),
					},
					{
						name: '密码修改',
						url: '../../pagesA/passwordChange/passwordChange',
						bgSrc: require('../../static/password.png'),
					},
					// {
					// 	name: '清理缓存',
					// 	bgSrc: require('../../static/broom.png'),
					// }
				],
			}
		},
		onShow() {
			console.log(1)
			// 获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo
			console.log(this.userInfo.userName)
		},
		methods: {
			click(val) {
				let url = val.url ? val.url : ''
				uni.navigateTo({
					url
				})
			},
			exitOut() {
				// 退出 先清除token 和 用户信息 然后跳转到登录页面
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');
				uni.reLaunch({
					url: '../login/login'
				})
			}
		}
	}
</script>

<style>
	.my-content {
		height: 100vh;
		background-color: #f4f6fa;
		overflow: hidden;
		position: relative;
	}

	.head-box {
		width: 100%;
		padding: calc(100rpx + var(--status-bar-height)) 0 100rpx 0;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		box-sizing: border-box;
	}

	.main-box {
		position: absolute;
		top: calc(440rpx + var(--status-bar-height));
		/* height: 800rpx; */
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		box-sizing: border-box;
	}
</style>
